<template>
  <el-drawer title="数据映射配置"
             :visible.sync="drawerVisible"
             size="80%"
             append-to-body
             @before-close="closeDialog"
             destroy-on-close
  >
    <div class="" style="padding-left: 15px;padding-right: 15px">
      <el-tabs :key="tabsKey" v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
        <el-tab-pane
          :key="item.id"
          v-for="(item, index) in dataMappingConfig"
          :label="item.title"
          :name="index">
          <span @dblclick="editConfig(item)" slot="label">{{ item.title }} </span>
          <start-mapping-column-config :cloud-form-column="cloudFormColumn"
                                       :mapping-config="item"></start-mapping-column-config>
        </el-tab-pane>
      </el-tabs>
    </div>
    <start-edit-mapping-table ref="startAddMappingTable" @submit="submitMapping"></start-edit-mapping-table>
  </el-drawer>
</template>

<script>
import startEditMappingTable from "./startEditMappingTable.vue";
import StartMappingColumnConfig from "./startMappingColumnConfig.vue";

export default {
  name: "start-data-mapping-config",
  components: {StartMappingColumnConfig, startEditMappingTable},
  data() {
    return {
      drawerVisible: false,
      editableTabsValue: '',
      dataMappingConfig: {},
      cloudFormOption: {},
      tabsKey: Math.random(),
      cloudFormColumn: []
    }
  },
  methods: {
    show(config) {
      this.cloudFormOption = config;
      config.dataMappingConfig = config.dataMappingConfig ? config.dataMappingConfig : {}
      this.dataMappingConfig = config.dataMappingConfig
      this.drawerVisible = true;
      this.cloudFormColumn = config.column.map(col => {
        return {label: col.label, value: col.prop}
      })
      let keys = Object.keys(this.dataMappingConfig)
      if (keys.length < 1) {
        return
      }
      this.editableTabsValue = keys[0];
    },
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        this.$refs.startAddMappingTable.edit(this.cloudFormColumn, {});
        return
      }
      let item = this.dataMappingConfig[targetName]
      this.$confirm(`您确定要删除这个映射配置吗【${item.title}】？是否继续？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delete this.dataMappingConfig[targetName]
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.tabsKey = Math.random()
      }).catch(() => {
      });
    },
    editConfig(item) {
      this.$refs.startAddMappingTable.edit(this.cloudFormOption, item);
    },
    submitMapping(data, done) {
      let key = data.dataSourceKey + "_" + data.targetTableName
      data.mappingColumns = data.mappingColumns || []
      data.id = key;
      this.dataMappingConfig[key] = data
      this.tabsKey = Math.random()
      this.editableTabsValue = key
      done();
    },
    closeDialog() {
      this.drawerVisible = false
      this.editableTabsValue = ''
      this.dataMappingConfig = {}
      this.cloudFormOption = {}
      this.cloudFormColumn = []
      this.tabsKey = Math.random()
    }
  }


}
</script>

<style scoped>

</style>
